<script setup>
import { ref ,onMounted} from 'vue'
import { getRecentDataFn } from '@/api/myAPI.js'
import mori from '@/assets/mori.png'
const recentData = ref([])
const imgurl = 'https://cdn7.axureshop.com/demo2024/1966126/images/%E9%A6%96%E9%A1%B5_/u178.svg'
onMounted(() => {
    getRecentDataFn().then(res => {
        recentData.value = res.recentData
    })
})
</script> 

<template>
    <div class="recent-box">
        <div class="context" v-for="item in recentData" :key="item.id">
           <header>
                <span class="h-left">
                    <img style="width: 0.4rem; border-radius: 50%; margin-right: 0.1rem;" :src="mori" alt="">
                    <p>
                        <span>小然然</span>
                        <span style="font-size: 0.12rem; color: #ccc;">{{ item.time }}</span>
                    </p>
                </span>
                <van-icon size="0.24rem" name="ellipsis" />
           </header>
           <main v-if="item.type== 'article'" class="article">
                <span class="van-multi-ellipsis--l3">
                    {{ item.context }}
                </span>
                <img style="width: 1.8rem;" :src="imgurl" alt="">
                <div class="smallTile">文章</div>  
            </main>
           <main v-else-if="item.type== 'video'" class="video">
                <p style="margin-bottom: 0.1rem;">{{ item.context }}</p>
                <img style="width: 100%; height: 1.8rem;" :src="imgurl" alt="">
            </main>
           <main v-else class="img-div">
                <p style="margin-bottom: 0.1rem;">{{ item.context }}</p>
                <template v-if="item.imgNum<=4">
                    <div class="imgClass1">
                        <img v-for="n in item.imgNum"style="height: 0.8rem; width: 1.2rem;" :src="imgurl" alt="">
                    </div>
                </template>
                <template v-else>
                    <div class="imgClass2">
                        <img style="width: 1rem; height:1rem;" v-for="n in 3" :src="imgurl" alt="">
                        <div class="smallTile">
                            {{'+' +(item.imgNum - 3)+'图'}}
                        </div>
                    </div>
                </template>
           </main>

           <footer>
                <span>
                    分享：<van-icon name="share-o" />
                </span>
                <span>
                    <van-icon name="comment-circle-o" />
                    {{ item.shareNum }}
                </span>
                <span>
                    <van-icon name="good-job-o" />
                    {{ item.likeNum }}
                </span>
           </footer>
        </div>
    </div>
</template>

<style scoped>
.recent-box{
    padding: 0.12rem 0.1rem; 
    background-color: #ccc;
}
.context{
    font-size: 0.16rem;
    background-color: white;
    padding: 0.1rem 0.1rem;
    border-radius: 0.08rem;
    margin-bottom:0.12rem ;
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .h-left{
            display: flex;
            align-items: center;
            p{
                display: flex;
                flex-direction: column;
            }
        }
    }
    .article{
        display: flex;
        justify-content: space-between;
        position: relative;
        span{
            margin-right: 0.2rem;
            line-height: 0.2rem;
            height: 0.6rem;
        }
        .smallTile{
            position: absolute;
            width: 0.3rem;
            color: #fff;
            height: 0.16rem;
            border-radius: 8rem;
            text-align: center;
            bottom: 0.1rem;
            right: 0.1rem;
            background-color: rgba(0, 0, 0, 0.1);
            font-size: 0.1rem;
        }
    
    }

    .img-div{
        div{
            width: 2.8rem;
            display: flex;
            height: 1.6rem;
            flex-direction: column;
            justify-content: start;
            flex-wrap: wrap;
        }
        .imgClass1{
            width: 100%;
            display: flex;
            justify-content:space-between;
            align-content: space-between;
            flex-wrap: wrap;
            padding: 0 0.2rem;
            box-sizing: border-box;
            height: 1.8rem;
        }
        .imgClass2{
            height: 1rem;
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
             .smallTile{
            position: absolute;
            width: 0.3rem;
            color: #fff;
            height: 0.16rem;
            border-radius: 8rem;
            text-align: center;
            bottom: 0.1rem;
            right: 0.1rem;
            background-color: rgba(0, 0, 0, 0.1);
            font-size: 0.1rem;
            }
        }
    }
    footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.1rem;
        font-size: 0.14rem;
    }
}

</style>